import React, { useEffect, useState } from 'react'
import { Button, Table, message, Dropdown } from 'antd';

import styles from './index.module.css'

//列
import { columns } from '../../constant/taskLogColumn'

import { getTaskLog, deleteTaskLog } from '../../utils/axiosRequest/api'


function PushLog(props) {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //表格展示数据
    const [showDataSource, setDataSource] = useState([]);
    const [load, setLoad] = useState(true);
    const [totalCount, settotalCount] = useState(0);

    const items = [
        {
            key: '3d',
            label: '3天前',
            extra: '⌘A',
        },
        {
            key: '1y',
            label: '1个月前',
            extra: '⌘P',
        },
        {
            key: '3y',
            label: '3个月前',
            extra: '⌘B',
        },
        {
            key: '12y',
            label: '1年前',
            extra: '⌘S',
        },
    ];


    //父控件传过来的值
    const { } = props;

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData(8, 1)
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function initData(pageSize, pageIndex) {
        setLoad(true)
        const params = new Map()
        params.set('pageSize', pageSize)
        params.set('pageIndex', pageIndex)
        getTaskLog(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    settotalCount(data.data.totalCount)
                    handleData(pageSize, pageIndex, data.data.taskLogList)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
                setLoad(false)
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
                setLoad(false)
            });
    }

    function handleData(pageSize, pageIndex, logList) {
        const pageMax = pageSize * (pageIndex - 1);
        const tempData = [];
        const length = logList.length;
        for (let i = 0; i < length; i++) {
            tempData.push({
                key: i,
                serial: pageMax + i + 1,
                taskId: logList[i].taskId,
                executionStartTime: logList[i].executionStartTime,
                executionEndTime: logList[i].executionEndTime,
                executionDuration: logList[i].executionDuration,
            })
        }
        //保存全量案件数据
        setDataSource(tempData)
    }

    function handleTableChange(pagination, filters, sorter) {
        const current = pagination.current;
        const pageSize = pagination.pageSize;
        initData(pageSize, current)
    }


    function onClick(e) {
        const { key } = e
        const params = new Map()
        params.set('deleteAction', key)
        deleteTaskLog(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    messageApi.open({ type: 'success', content: data.des });
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    };

    return (
        <div className={styles.root}>
            {contextHolder}
            <Table loading={load} title={() => {
                return (
                    <div className={styles.head_box}>
                        <Dropdown menu={{ items, onClick }} placement="bottom" arrow >
                            <Button variant="solid" color="danger" size={'middle'} >清理日志</Button>
                        </Dropdown>
                    </div>
                )
            }} size={'middle'}
                pagination={{ showSizeChanger: false, pageSize: '8', position: ['bottomCenter'], defaultCurrent: '1', total: totalCount }}
                bordered={true} dataSource={showDataSource} columns={columns} scroll={{ x: 100 }}
                onChange={handleTableChange} />

        </div>
    )
}


export default PushLog

